<div class="ui stackable grid">
<div class="three wide column" >
<div class="" style="padding:10px">
  <div class="ui ordered list" style="margin:0 auto!">
  <a class="item" *ngFor="let group_ of allGroups" >
    <span (click)="showApis(group_._id)">{{group_.name}}</span>
    <div class="item" *ngIf="group_.apis&& group_.apis.length > 0">
      <div class="list" >
        <a class="item" *ngFor="let api_ of group_.apis" (click)="showApi(api_._id)">{{api_.name}}</a>
      </div>
    </div>
  </a>
</div>
</div>
</div>

<div class="ten wide column">




<h3>{{proj.title}}</h3>

<form class="ui form" #apiForm="ngForm">
  <div class="field" [class.error]="!apiname.valid">
    <label>接口名称</label>
    <input type="text"  placeholder="max length is 100" [(ngModel)]="apiData.name" #apiname="ngForm" ngControl="apiname" maxlength="100" required>
  </div>
  <div class="field" [class.error]="!action.valid">
    <label>功能</label>
    <input type="text" placeholder="max length is 500" [(ngModel)]="apiData.action" #action="ngForm" ngControl="action" maxlength="500" required>
  </div>
  <div class="three fields">
    <div class="field" [class.error]="!groupId.valid">
      <label>分组</label>
      <select class="ui fluid search dropdown" name="card[expire-month]" [(ngModel)]="apiData.groupId" #groupId="ngForm" ngControl="groupId" required>
        <option value="{{group._id}}" *ngFor="let group of groups;let i = index">
          {{group.name}}
        </option>
      </select>
    </div>
    <div class="field" [class.error]="!httpMethod.valid">
      <label>Http Method</label>
      <select class="ui fluid search dropdown" name="card[expire-month]" [(ngModel)]="apiData.httpMethod" #httpMethod="ngForm" ngControl="httpMethod" required>
        <option value="GET">GET</option>
        <option value="POST">POST</option>
        <option value="PUT">PUT</option>
        <option value="DELETE">DELETE</option>
        <option value="PATCH">PATCH</option>
        <option value="HEAD">HEAD</option>
      </select>
    </div>
  </div>
  <div class="field" [class.error]="!url.valid">
    <label>URL</label>
    <input type="text" name="last-name" placeholder="max length is 1000" [(ngModel)]="apiData.url" #url="ngForm" ngControl="url" maxlength="1000" required>
  </div>
  <div class="field">
    <label>参数</label>
    <a class="ui right labeled icon button orange" (click)="addParam()"><i class="right plus icon" ></i> Add </a>
  </div>
  <div class="ui grid"  *ngIf="apiData.params.length > 0">
    <div class="field three wide column" style="padding-bottom:0px">
      <label>参数名称</label>
    </div>
    <div class="field two wide column" style="padding-bottom:0px">
      <label>参数类型</label>
    </div>
    <div class="field two wide column" style="padding-bottom:0px">
      <label>模式</label>
    </div>
    <div class="field two wide column" style="padding-bottom:0px">
      <label>可选性</label>
    </div>
    <div class="field seven wide  column" style="padding-bottom:0px">
      <label>描述</label>
    </div>
  </div>

  <div class="ui grid" *ngFor="let param of apiData.params;let i = index">
    <div class="field three wide column" style="padding-top:0px;padding-bottom:0px" [class.error]="!paramName.valid">
      <input type="text" name="last-name" placeholder="max length is 100" [(ngModel)]="param.name" #paramName="ngForm" ngControl="paramName" required>
    </div>
    <div class="field two wide column" style="padding-top:0px;padding-bottom:0px" [class.error]="!paramType.valid">
      <select class="ui fluid search dropdown" name="card[expire-month]" [(ngModel)]="param.paramType" #paramType="ngForm" ngControl="paramType" required>
        <option value="String">String</option>
        <option value="Int">Int</option>
        <option value="Double">Double</option>
        <option value="Boolean">Boolean</option>
        <option value="Date">Date</option>
        <option value="File">File</option>
      </select>
    </div>
    <div class="field two wide column" style="padding-top:0px;padding-bottom:0px">
      <select class="ui fluid search dropdown" name="card[expire-month]" [(ngModel)]="param.paramStyle" #paramType="ngForm" ngControl="paramType" required>
        <option value="Query">Query</option>
        <option value="Body">Body</option>
        <option value="Header">Header</option>
        <option value="Template">Template</option>
      </select>
    </div>
    <div class="field two wide column" style="padding-top:0px;padding-bottom:0px">
      <select class="ui fluid search dropdown" name="card[expire-month]" [(ngModel)]="param.optional">
        <option value="true">必选</option>
        <option value="false">可选</option>
      </select>
    </div>
    <div class="seven wide column field" style="padding-top:0px;padding-bottom:0px">
      <div class="ui grid">
        <div class="thirteen wide column field">
          <input type="text" name="last-name" placeholder="max length is 1000" [(ngModel)]="param.description">
        </div>
        <div class="three wide column field">
          <button class="ui circular google plus icon button" (click)="removeParam(i)">
            <i class="remove icon"></i>
          </button>
        </div>
      </div>
    </div>

  </div>

  <div class="field" style="margin-top:10px">
    <label>返回参数</label>
    <a class="ui right labeled icon button orange" (click)="addResp()"><i class="right plus icon" ></i> Add </a>
  </div>
  <div style="margin-top:10px" class="ui grid" *ngFor="let resp of apiData.resps;let i = index">
    <div class="field sixteen wide column" style="padding-top:0px;padding-bottom:0px" [class.error]="!paramName.valid">
      参数{{i+1}}
    </div>
    <div class="field eight wide column" style="padding-top:0px;padding-bottom:0px" [class.error]="!paramName.valid">
      <input type="text" name="last-name" placeholder="max length is 100" [(ngModel)]="resp.respCode" #paramName="ngForm" ngControl="paramName" required>
    </div>
    <div class="field eight wide column" style="padding-top:0px;padding-bottom:0px">
      <select class="ui fluid search dropdown" name="card[expire-month]" [(ngModel)]="resp.respType" #paramType="ngForm" ngControl="paramType" required>
        <option value="JSON">JSON</option>
        <option value="TEXT">TEXT</option>
      </select>
    </div>
    <div class="field sixteen wide column" style="padding-top:0px;padding-bottom:0px">
      <input type="text" name="last-name" placeholder="max length is 100" [(ngModel)]="resp.description" #paramName="ngForm" ngControl="paramName" >
    </div>
    <div class="sixteen wide column field" style="padding-top:0px;padding-bottom:0px">
      <div class="ui grid">
        <div class="fifteen wide column field">
          <textarea rows="4" [(ngModel)]="resp.content"></textarea>
        </div>
        <div class="one wide column field">
          <button class="ui circular google plus icon button" (click)="removeResp(i)">
            <i class="remove icon"></i>
          </button>
        </div>
      </div>
    </div>

  </div>


  <div style="margin-top:10px" class="field">
    <label>描述</label>
    <textarea rows="4" [(ngModel)]="apiData.description"></textarea>
  </div>
  <button class="ui button green" (click)="submit()" [disabled]="!apiForm.form.valid">Submit</button>
</form>

</div>

</div>
